<!DOCTYPE html>
<html>
	<head>
		<title>Template.js - Documentation</title>
		<link href="../../common/docs/docs.css" rel="stylesheet" type="text/css">
		<script src="../../Dependencies/src/?need=M4,CodeFormater"></script>
	</head>
	<body>
		<header>
			<h1>Template.js</h1>
			<menu>
				<li><a href="#download">Download</a></li>
				<li><a href="#intro">Introduction</a></li>
				<li><a href="#sample">Sample</a></li>
				<li><a href="#apiref">API Ref</a></li>
			</menu>
		</header>
		<div class="content">
			<h2 id="download">TL;DR</h2>
			<p>
				<button onclick="window.open('../../Dependencies/src/?need=Template');">Download</button>
			</p>
			<h2 id="intro">Introduction</h2>
			<p>
				Template.js is a lightweight javascript library for client side HTML Templating.
			</p>
			<p>
				Only few features are availables :
			</p>
			<ul>
				<li>Any kinds of variables (String, Number, Array, Object)</li>
				<li>Loops (for Array only)</li>
				<li>Conditions</li>
				<li>Functions (in progress)</li>
				<li>Event based</li>
				<li><a href="http://www.smarty.net/" target="_blank">Smarty</a> inspired</li>
			</ul>
		</div>
		<div class="content" id="sample">
			<h2>Sample</h2>
			<p>Html template definition :</p>
<pre class="PendingCodeFormater">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Template.js - Sample&lt;/title&gt;
		&lt;script src="js/Template.js"&gt;&lt;/script&gt;
		&lt;script src="js/Sample.js"&gt;&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;Template.js - Sample&lt;/h1&gt;
		&lt;div id="holder"&gt;&lt;/div&gt;
		&lt;script type="html/template" id="firstTemplate"&gt;
			&lt;h2&gt;Hello {$var1}&lt;/h2&gt;
			&lt;ul&gt;
			{foreach $myTable $item $key}
				&lt;li&gt;{$item} : {if $key%2==0} even {else} odd {/if}&lt;/li&gt;
			{else}
			&lt;li&gt;Empty Table&lt;/li&gt;
			{/foreach}
			&lt;/ul&gt;
			&lt;p&gt;Hi, I am {$me.name} and I am in a {$me.mood} mood.&lt;/p&gt;
			&lt;p&gt;fooFunc : {=fooFunc()}&lt;/p&gt;
		&lt;/script>
	&lt;/body&gt;
&lt;/html&gt;
</pre>
		<p>Javascript part (js/Sample.js) :</p>
<pre class="PendingCodeFormater">function init()
{
	var fooFunc = function(){return "bar"};
	var table = ["This", "must", "work"];
	var me = {"name":"Template.js", "mood":"pretty good"};
	var tpl = new Template("firstTemplate");
	tpl.assign("var1", "world");
	tpl.assign("me", me);
	tpl.assign("myTable", table);
	tpl.setFunction("foo", fooFunc);
	tpl.addEventListener(TemplateEvent.RENDER_INIT, tplRenderInitHandler, false);
	tpl.addEventListener(TemplateEvent.RENDER_COMPLETE, tplRenderCompleteHandler, false);
	tpl.addEventListener(TemplateEvent.RENDER_COMPLETE_LOADED, tplRenderCompleteLoadedHandler, false);
	tpl.render("#holder");
}
window.addEventListener("load", init, false);

function tplRenderInitHandler(e)
{
	console.log("Sample.js : init");
}

function tplRenderCompleteHandler(e)
{
	//Ready to display result
	console.log("Sample.js : complete");
}

function tplRenderCompleteLoadedHandler(e)
{
	//Ready to display & everything is loaded (images)
	console.log("Sample.js : complete & loaded");
}</pre>
		<p><a href="../samples/05_doc_sample.html" target="_blank">View result</a></p>
		</div>
		<div class="content apiref" id="apiref">
			<h2>API Reference</h2>
			<h3>Template</h3>
			<span class="inheritance">--<a href="">EventDispatcher</a><br/><span class="inheritance">--<a href="">Class</a></span></span>
			<div class="method">
				<span>Template</span>(pIdTemplate)
				<p>Constructor - Instanciate a Template Object</p>
				<p><span>pIdTemplate</span> (string) : Script template's id within DOM</p>
				<pre class="PendingCodeFormater">var tpl = new Template("myTemplate");</pre>
			</div>
			<div class="method">
				<span>assign</span>(pName, pValue)<div class="from">Template</div>
				<p>Variable asignation method</p>
				<p><span>pName</span> (string) : Variable's name</p>
				<p><span>pValue</span> (*) : Variable's value, could be a String, a Number, an Object or an Array</p>
				<pre class="PendingCodeFormater">tpl.assign("myVar", "Lorem Ipsum Dolorem si amet");</pre>
			</div>
			<div class="method">
				<span>evaluate</span>()<div class="from">Template</div>
				<p>Evaluate template &amp; return the result (as string)</p>
			</div>
			<div class="method">
				<span>render</span>(pParentNode)<div class="from">Template</div>
				<p>Evaluate &amp; render template</p>
				<p><span>pParentNode</span> (string||HTMLElement) : Specifies a HTMLElement to be the parentNode of template's evaluation result</p>
			</div>
			<div class="method">
				<span>setFunction</span>(pName, pFunction)<div class="from">Template</div>
				<p>Function definition method</p>
				<p><span>pName</span> (string) : Function's name</p>
				<p><span>pFunction</span> (function) : function to execute each time template refer to it</p>
				<pre class="PendingCodeFormater">tpl.setFunction("round", function(pValue)
{
	return Math.round(pValue);
});</pre>
			</div>
			<div class="method">
				<span>addEventListener</span>(pType, pHandler, pCapture)<div class="from">EventDispatcher</div>
				<p>Register a new event listener</p>
				<p><span>pType</span> (string)</p>
				<p><span>pHandler</span> (function)</p>
				<p><span>pCapture</span> (bool)</p>
			</div>
			<div class="method">
				<span>dispatchEvent</span>(pEvent)<div class="from">EventDispatcher</div>
				<p>...</p>
				<p><span>pEvent</span> (Event)</p>
			</div>
			<div class="method">
				<span>removeAllEventListener</span>(pType)<div class="from">EventDispatcher</div>
				<p>...</p>
				<p><span>pType</span> (string)</p>
			</div>
			<div class="method">
				<span>removeEventListener</span>(pType, pHandler, pCapture)<div class="from">EventDispatcher</div>
				<p>Unregister a new event listener</p>
				<p><span>pType</span> (string)</p>
				<p><span>pHandler</span> (function)</p>
				<p><span>pCapture</span> (bool)</p>
			</div>
			<div class="method">
				<span>toString</span>()<div class="from">Class</div>
				<p></p>
			</div>
			<hr>
			<h3>TemplateEvent</h3>
			<span class="inheritance">--<a href="">Event</a><br/><span class="inheritance">--<a href="">Class</a></span></span>
			<div class="method">
				<span>TemplateEvent</span>(pType, pTime, pBubbles)
				<p>Constructor - Instanciate a TemplateEvent Object</p>
				<p><span>pType</span> (string) : Event's type</p>
				<p><span>pTime</span> (number) : Associate timing (time to execute evaluation/rendering phase)</p>
				<p><span>pBubbles</span> (bool)</p>
			</div>
			<div class="method">
				<span>clone</span>()<div class="from">TemplateEvent</div>
				<p></p>
			</div>
			<div class="method">
				<span>toString</span>()<div class="from">TemplateEvent</div>
				<p></p>
			</div>
			<div class="prop">
				<span>RENDER_INIT</span><div class="from">TemplateEvent</div>
				<p>Event triggered once rendering initialized</p>
			</div>
			<div class="prop">
				<span>RENDER_COMPLETE</span><div class="from">TemplateEvent</div>
				<p>Event sent when the rendering phase is completed</p>
			</div>
			<div class="prop">
				<span>RENDER_COMPLETE_LOADED</span><div class="from">TemplateEvent</div>
				<p>Event sent when the rendering phase is completed and once every images are loaded</p>
			</div>
		</div>
		<footer>
			DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
		</footer>
	</body>
</html>